<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
          crossorigin="anonymous">
    <title>绘制图形</title>
</head>

<body>
<div class="container">
    <div id="map" class="map"></div>
    <br>

    <pre>
            <div id="export"></div>
            </pre>
    <div class="btn-group btn-group-sm" id="bar" role="group" aria-label="Draw">
        <button id="pan" type="button" class="btn btn-primary">Pan</button>
        <button id="select" type="button" class="btn btn-default active">Select</button>
        <button id="point" value="pointless" type="button" class="btn btn-success">Point</button>
        <button id="polygon" value="polygons" type="button" class="btn btn-success">polygon</button>
        <button id="lines" value="lines" type="button" class="btn btn-success">line</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
            integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
            integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
          integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
            integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
            crossorigin="anonymous"></script>

    <!--</body>-->
</div>
</body>
<script>


    var styles = [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 3
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            })
        }),
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: 'orange'
                })
            }),
        })
    ];
    var vector = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: styles

    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            vector
        ],
        target: 'map',
        view: new ol.View({
            center: [120, 30],
            projection: 'EPSG:4326',
            zoom: 4
        })
    });

    map.on('pointermove', function (e) {
        if (e.dragging) return;
        var
            pixel = map.getEventPixel(e.originalEvent),
            hit = map.hasFeatureAtPixel(pixel);
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

    var button = $('#pan').button('toggle');
    var interaction;
    var features = undefined;

    $('div.btn-group button').on('click', function (event) {
        var id = event.target.id;
        var features;
        var selectedFeatures = undefined;
        button.button('toggle');
        button = $('#' + id).button('toggle');
        map.removeInteraction(interaction);

        switch (id) {
            case "select":
                document.getElementById("export").innerHTML = "";
                interaction = new ol.interaction.Select();
                map.addInteraction(interaction);
                features = interaction.getFeatures();

                dragBoxInteraction = new ol.interaction.DragBox({
                    condition: ol.events.condition.platformModifierKeyOnly,
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: [12, 25, 25, 4]
                        })
                    })
                });
                dragBoxInteraction.on('boxend', function (event) {
                    selectedFeatures = interaction.getFeatures();
                    selectedFeatures.clear();
                    var extent = dragBoxInteraction.getGeometry().getExtent();
                    vector.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
                        selectedFeatures.push(feature);
                    });
                });
                map.addInteraction(dragBoxInteraction);

                break;
            case "point":
                interaction = new ol.interaction.Draw({
                    type: 'Point',
                    source: vector.getSource()
                });
                vector.getSource().on('addfeature', function (e) {
                    var source = e.target;
                    var writer = new ol.format.WKT();

                    if (vector.getSource().getState() === 'ready') {
                        var wkt = writer.writeFeatures(vector.getSource().getFeatures());
                        document.getElementById("export").innerHTML = wkt;
                    }
                });
                map.addInteraction(interaction);
                break;
            case "polygon":
                interaction = new ol.interaction.Draw({
                    type: 'Polygon',
                    source: vector.getSource()
                });
                vector.getSource().on('addfeature', function (e) {
                    var source = e.target;
                    var writer = new ol.format.WKT();

                    if (vector.getSource().getState() === 'ready') {
                        var wkt = writer.writeFeatures(vector.getSource().getFeatures());
                        document.getElementById("export").innerHTML = wkt;
                    }
                });
                map.addInteraction(interaction);
                break;

            case "lines":
                interaction = new ol.interaction.Draw({
                    type: 'LineString',
                    source: vector.getSource()
                });
                vector.getSource().on('addfeature', function (e) {
                    var source = e.target;
                    var writer = new ol.format.WKT();

                    if (vector.getSource().getState() === 'ready') {
                        var wkt = writer.writeFeatures(vector.getSource().getFeatures());
                        document.getElementById("export").innerHTML = wkt;
                    }
                });
                map.addInteraction(interaction);
                break;

            default:
                break;
        }
        var snap = new ol.interaction.Snap({
            source: vector.getSource()
        });
        map.addInteraction(snap);
    });
</script>

</html>
